<template>
  <div class="flex" style="flex-direction: column; height: 100%">
    <div class="title">教学质量评分排名</div>
    <div class="box1">
      <div class="jxzlpm" v-px-to-vw>
        <!-- <div>平均分：<span class="score">4.5分</span></div>
        <div style="margin-left: 30px" v-px-to-vw>最高分：<span class="score">5分</span></div> -->
        <!-- 高一排名 -->
        <div class="grade-section">
          <h3 class="gradeRank-title">高一</h3>
          <div class="ranking-list" v-px-to-vw>
            <div v-for="(item, index) in gradeOneRankings" :key="index" class="ranking-item">
              <span class="rank">
                <!-- <component :is="getRankIcon(item.ranking - 1)" v-if="index < 3" />
                <span v-else>{{ item.ranking }}</span> -->
                <img v-if="index === 0" :src="firstImg" class="rank-img" />
                <img v-else-if="index === 1" :src="secondImg" class="rank-img" />
                <img v-else-if="index === 2" :src="thirdImg" class="rank-img" />
                <span class="rnkingbj" v-else>{{ item.ranking }}</span>
              </span>
              <el-tooltip :content="`班级：${item.className}`" placement="left">
                <span class="teacher">{{ item.teacher }}({{ item.subject }})</span>
              </el-tooltip>
            </div>
          </div>
        </div>

        <!-- 高二排名 -->
        <div class="grade-section">
          <h3 class="gradeRank-title">高二</h3>
          <div class="ranking-list" v-px-to-vw>
            <div v-for="(item, index) in gradeTwoRankings" :key="index" class="ranking-item">
              <span class="rank">
                <!-- <component :is="getRankIcon(item.ranking - 1)" v-if="index < 3" />
                <span v-else>{{ item.ranking }}</span> -->
                <img v-if="index === 0" :src="firstImg" class="rank-img" />
                <img v-else-if="index === 1" :src="secondImg" class="rank-img" />
                <img v-else-if="index === 2" :src="thirdImg" class="rank-img" />
                <span class="rnkingbj" v-else>{{ item.ranking }}</span>
              </span>   
              <el-tooltip :content="`班级：${item.className}`" placement="left">
                <span class="teacher">{{ item.teacher }}({{ item.subject }})</span>
              </el-tooltip>
            </div>
          </div>
        </div>

        <!-- 高三排名 -->
        <div class="grade-section">
          <h3 class="gradeRank-title">高三</h3>
          <div class="ranking-list" v-px-to-vw>
            <div v-for="(item, index) in gradeThreeRankings" :key="index" class="ranking-item">
              <span class="rank">
                <!-- <component :is="getRankIcon(item.ranking - 1)" v-if="index < 3" />
                <span v-else>{{ item.ranking }}</span> -->
                <img v-if="index === 0" :src="firstImg" class="rank-img" />
                <img v-else-if="index === 1" :src="secondImg" class="rank-img" />
                <img v-else-if="index === 2" :src="thirdImg" class="rank-img" />
                <span class="rnkingbj" v-else>{{ item.ranking }}</span>
              </span>
              <el-tooltip :content="`班级：${item.className}`" placement="left">
                <span class=" teacher">{{ item.teacher }}({{ item.subject }})</span>
              </el-tooltip>
            </div>
          </div>
        </div>

      </div>
      <!-- <div ref="chartRefA" class="chart-container" style="height: calc(100% - 48px)" v-px-to-vw></div> -->
    </div>
    <div class="title">填写进度</div>
    <div class="box2 flex">
      <div style="flex: 2">
        <div ref="barChartRef" class="chart-container" style="flex: 3"></div>
      </div>
      <div style="flex: 1">
        <!-- <div ref="pieChartRefB" class="chart-container" style="flex: 3"></div> -->
        <div ref="chartRefD" class="chart-container" style="flex: 3"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,onUnmounted } from "vue";
import * as echarts from "echarts";
import * as leaderApi from '@/api/leaders'
import firstImg from '@/assets/images/profile/leader/num1.png'
import secondImg from '@/assets/images/profile/leader/num2.png'
import thirdImg from '@/assets/images/profile/leader/num3.png'
let chartRefA = ref(null);
let chartA = ref(null);
let chartRefD = ref(null);
let chartD = ref(null);

let barChartRef = ref(null);
let barChart = ref(null);

let pieChartRefB = ref(null);
let pieChartB = ref(null);


// 定义前三名的图标组件
const FirstPlaceIcon = {
  template: '<img :src="firstImg" class="rank-img" />'
}

const SecondPlaceIcon = {
  template: '<img :src="secondImg" class="rank-img" />'
}

const ThirdPlaceIcon = {
  template: '<img :src="thirdImg" class="rank-img" />'
}

// 	教学质量评分排名
const teaching_credit_ranking = async () => {
      gradeOneRankings.value = [];
    gradeTwoRankings.value = [];
    gradeThreeRankings.value = [];
  leaderApi.teaching_credit_ranking().then(res => {

    var data = res.data;
    // 高一数据 (2025届)
    gradeOneRankings.value = data
      .filter(item => item.xj === '2025')
      .sort((a, b) => a.ranking - b.ranking).map(item => ({
        teacher: item.name, className: item.class_name,ranking:item.ranking,subject:item.subject
      })).slice(0, 10)

    // 高二数据 (2024届)
    gradeTwoRankings.value = data
      .filter(item => item.xj === '2024')
      .sort((a, b) => a.ranking - b.ranking).map(item => ({
        teacher: item.name, className: item.class_name,ranking:item.ranking,subject:item.subject
      })).slice(0, 10);

    // 高三数据 (2023届)
    gradeThreeRankings.value = data
      .filter(item => item.xj === '2023')
      .sort((a, b) => a.ranking - b.ranking).map(item => ({
        teacher: item.name, className: item.class_name, ranking: item.ranking, subject: item.subject
      })).slice(0, 10);
  });
}

// 高一排名数据
const gradeOneRankings = ref([])

// 高二排名数据
const gradeTwoRankings = ref([ ])

// 高三排名数据
const gradeThreeRankings = ref([ ])

// 获取排名图标
const getRankIcon = (index) => {
  switch (index) {
    case 0: return FirstPlaceIcon
    case 1: return SecondPlaceIcon
    case 2: return ThirdPlaceIcon
    default: return null
  }
}

// 获取排名样式类
const getRankingClass = (index) => {
  if (index === 0) return 'first-place';
  if (index === 1) return 'second-place';
  if (index === 2) return 'third-place';
  return 'normal-place';
}

// 获取排名文本
const getRankText = (index) => {
  const ranks = ['🥇', '🥈', '🥉'];
  return ranks[index] || index + 1;
}


const category_submit_count = async () => {

  leaderApi.category_submit_count().then(res => {
    initChartBar(res.data);
  });
}

// 教师教学评价等级分布
const satisfi_distr = async () => {

  leaderApi.satisfi_distr().then(res => {
    console.log("satisfi_distr", res);
    initChartD(res.data);
  });
}

onMounted(() => {
  category_submit_count();
  satisfi_distr();
  teaching_credit_ranking();
  refreshDataInterval();
});

const initChartD = (resData) => {
  if (chartRefD.value) {
    const existingChart = echarts.getInstanceByDom(chartRefD.value);
    if (existingChart) existingChart.dispose();
  }

  var data = resData.map(item => ({ value: item.num, name: item.label }));

  const option = {
    color: ["#00ffb2", "#fff509", "#00c1ff", "#00fff1"],
    title: {
      top: "6%",
      left: "0",
      text: "教学评价",
      textStyle: {
        color: "#80D3FF",
        fontSize: 13,
      },
    },
    // legend: {
    //   show: true,  // 显示图例
    //   type: 'scroll',  // 滚动图例，防止溢出
    //   orient: 'vertical',
    //   right: 0,
    //   top: 'middle',
    //   textStyle: {
    //     color: '#fff',
    //     fontSize: 8
    //   },
    //   height: '70%'
    // },
    series: [
      {
        type: "pie",
        radius: ["30%", "45%"],
        center: ["53%", "60%"],  // 调整中心位置，为图例留出空间
        itemStyle: {
          borderRadius: 20,
        },
        label: {
          show: true,
          formatter: ["{a|{b}}", "{b|{c}人}"].join("\n"),
          rich: {
            a: {
              color: "#fff",
              fontSize: 11,
            },
            b: {
              color: "#fff",
              fontSize: 11,
            },
          },
          position: 'outside',
          // alignTo: 'labelLine',
          edgeDistance: 10,
          distanceToLabelLine: 2,
          bleedMargin: 15,
          // 防止标签重叠
          // overflow: 'break',
          width: 80
        },
        labelLine: {
          show: true,
          length: 15,
          length2: 10,
          smooth: true,
        },
        data: data,
        // 避免数据项过多时显示问题
        avoidLabelOverlap: true
      },
    ],
  };
  chartD.value = echarts.init(chartRefD.value);
  chartD.value.setOption(option);
};


const initChartLine = () => {
  const option = {
    color: ["#00ffb2"],
    legend: {
      show: false,
    },
    grid: {
      top: 30,
      right: 30,
      bottom: 20,
      left: 30,
      containLabel: true,
    },
    tooltip: {},
    xAxis: {
      type: "value",
      min: "dataMin",
      axisLine: {
        lineStyle: {
          color: "#00D1FF", // ✅ X轴线颜色
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
        lineStyle: {
          color: "#00D1FF",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: "人数",
        type: "line",
        smooth: true,
        data: [
          [3, 2],
          [3.5, 5],
          [4, 3],
          [4.5, 4],
          [5, 6],
        ],
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "rgba(0,255,240,0.3)" },
              { offset: 1, color: "rgba(0,255,240,0.1)" },
            ],
          },
        },
        markLine: {
          symbol: "none", // 不显示箭头
          lineStyle: {
            type: "dashed",
            color: "#FFF509",
            width: 1,
          },
          data: [
            {
              xAxis: 4.5,
            },
          ],
        },
      },
    ],
  };
  chartA.value = echarts.init(chartRefA.value);
  chartA.value.setOption(option);
};

const initChartBar = (resData) => {
  if (barChartRef.value) {
    const existingChart = echarts.getInstanceByDom(barChartRef.value);
    if (existingChart) existingChart.dispose();
  }
  var xData = resData.map(item => item.name);
  var seriesData = resData.map(item => item.t);
  const option = {
    color: ["##00F0FF", "#09FF5D"],
    legend: {
      show: false,
    },
    title: {
      top: "6%",
      left: "0",
      text: "综合素质评价",
      textStyle: {
        color: "#80D3FF",
        fontSize: 13,
      },
    },
    grid: {
      top: "30%",
      right: 0,
      bottom: 10,
      left: 0,
      containLabel: true,
    },
    tooltip: {},
    xAxis: {
      type: "category",
      data: xData,
      axisLine: {
        lineStyle: {
          color: "#00D1FF", // ✅ X轴线颜色
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
        fontSize: 10,
        show: true,
        interval: 0,  // 显示所有标签

      }
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: "人数",
        type: "bar",
        data: seriesData,
        barWidth: 20,
        label: {
          show: true,
          color: "#fff",
          position: "top",
        },
        itemStyle: {
          color: function (params) {
            // 根据数据动态返回颜色
            const colors = [
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#00F0FF" },
                { offset: 1, color: "rgba(23,241,255,0)" },
              ]),
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(9,255,93,0.36)" },
                { offset: 0.5, color: "rgba(23,241,255,1)" },
                { offset: 1, color: "rgba(23,241,255,0)" },
              ]),
              // 可以添加更多渐变颜色
            ];
            return colors[params.dataIndex % colors.length];
          },
        },
      },
    ],
  };
  barChart.value = echarts.init(barChartRef.value);
  barChart.value.setOption(option);
};

const value2 = 0.8;
const initChartB = () => {
  const option = {
    title: {
      top: "6%",
      left: "0",
      text: "教学评价",
      textStyle: {
        color: "#80D3FF",
        fontSize: 13,
      },
    },
    series: [
      // 刻度
      {
        type: "gauge",
        radius: "70%",
        center: ["50%", "52%"],
        startAngle: 360,
        endAngle: 0,
        axisTick: {
          show: true,
          lineStyle: {
            color: "#FFF",
            width: 1,
          },
          length: -8,
        }, //刻度样式
        splitLine: {
          show: false,
        }, //分隔线样式
        axisLabel: {
          show: false,
        }, //刻度节点文字颜色
        pointer: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        label: {
          show: false,
        },
        detail: {
          show: false,
        },
      },
      {
        name: "内部进度条",
        type: "gauge",
        center: ["50%", "52%"],
        radius: "68%",
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            color: [
              [
                value2,
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#356bfd",
                  },
                  {
                    offset: 1,
                    color: "#69dce1",
                  },
                ]),
              ],
              [1, "rgba(107,157,215,.25)"],
            ],
            width: 6,
          },
        },
        z: 4,
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        itemStyle: {
          color: "#45CAED",
        },
        detail: {
          show: false,
        },
        label: {
          show: false,
        },

        title: {
          //标题
          show: true,
          offsetCenter: [0, 0],
          textStyle: {
            color: "#37DBFF",
            fontSize: 16,
            lineHeight: 28,
          },
        },
        data: [
          {
            name: value2 * 100 + "%",
            value: value2 * 100,
          },
        ],
        pointer: {
          show: false,
        },
      },
    ],
  };
  pieChartB.value = echarts.init(pieChartRefB.value);
  pieChartB.value.setOption(option);
};

onUnmounted(() => { 
  if(ref_setInterval.value)
  {
    clearInterval(ref_setInterval.value);
    ref_setInterval.value = null;
  }
})

const ref_setInterval = ref(null);
const refreshDataInterval = () => { 
  if (import.meta.env.VITE_API_REFRESH_IsEnable == 0) {
    ref_setInterval.value = setInterval(() => {
      category_submit_count();
      satisfi_distr();
      teaching_credit_ranking();
    }, import.meta.env.VITE_API_REFRESH_INTERVAL);
  }
}

</script>

<style lang="scss" scoped>
.box1 {
  width: 480px;
  height: calc(60% - 35px);
  background-image: url("@/assets/images/profile/leader/bg-1.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: #00fff0;
}

.box2 {
  width: 480px;
  padding: 0 20px;
  box-sizing: border-box;
  height: calc(40% - 35px);
  background-image: url("@/assets/images/profile/leader/bg-3.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.title {
  color: white;
  width: 100%;
  height: 20px;
  line-height: 20px;
  margin: 10px 0;
  text-align: left;
  vertical-align: middle;
  border-left: 4px solid #00a7ff;
  padding-left: 10px;
  border-radius: 2px;
}

.score {
  display: inline-block;
  text-align: center;
  font-size: 16px;
  line-height: 36px;
  width: 95px;
  height: 38px;
  background-image: url("@/assets/images/profile/leader/score-bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.jxzlpm {
  display: flex;
  height: 100%;
  justify-content: space-between;
  padding: 5px;
  overflow: hidden;
}

.grade-section {
  flex: 1;
  margin: 0 5px;
 
  border-radius: 8px;
  padding: 10px 5px;

   .gradeRank-title{color: #fff; cursor: pointer;}
}

.grade-section h3 {
  text-align: center;
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

/* 排名列表动画样式 */
.ranking-list {
  height: calc(100% - 50px);
  // max-height: 230px;
  animation: fadeIn 0.5s ease-out;
  overflow-y: auto;
}

.ranking-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 5px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.4s forwards;
}

/* 为每个排名项设置不同的动画延迟 */
.ranking-item:nth-child(1) {
  animation-delay: 0.1s;
}

.ranking-item:nth-child(2) {
  animation-delay: 0.2s;
}

.ranking-item:nth-child(3) {
  animation-delay: 0.3s;
}

.ranking-item:nth-child(4) {
  animation-delay: 0.4s;
}

.ranking-item:nth-child(5) {
  animation-delay: 0.5s;
}

.ranking-item:nth-child(6) {
  animation-delay: 0.6s;
}

.ranking-item:last-child {
  border-bottom: none;
}

.rank {
  flex: 0 0 40px;
  font-weight: bold;
  text-align: center;
}
.rank-img
{
    width: 30px;
    // object-fit: contain;
    // vertical-align: middle;
}

.rnkingbj{
  display: block;
  width: 34px;
  height: 20px;
  line-height: 20px;
  margin-top: -2px;
  margin-left: 3px;
  background-image: url("@/assets/images/profile/leader/bg-1.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.teacher {
  flex: 1;
  text-align: left;
  cursor: pointer;
}

.class {
  flex: 1;
  text-align: center;
}

/* 排名特殊样式 */
.first-place {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), transparent);
  border-left: 3px solid #ffd700;
}

.second-place {
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.2), transparent);
  border-left: 3px solid #c0c0c0;
}

.third-place {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.2), transparent);
  border-left: 3px solid #cd7f32;
}

.first-place .rank {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}

.second-place .rank {
  color: #c0c0c0;
  text-shadow: 0 0 8px rgba(192, 192, 192, 0.7);
}

.third-place .rank {
  color: #cd7f32;
  text-shadow: 0 0 8px rgba(205, 127, 50, 0.7);
}

/* 动画关键帧 */
@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 脉冲效果 */
.first-place {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
}

</style>
